<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>遇见最美的你-搭配</title>
    <link rel="stylesheet" href="__PUBLIC__/seller/css/weui.css">
    <link rel="stylesheet" href="__PUBLIC__/seller/css/weui2.css?id=333">
    <link rel="stylesheet" href="__PUBLIC__/css/animate.min.css">
    <style>
    .container{
    	align-items: center;
    }
    .container .mote_index{
    	width:50%;
    	position: absolute;
    	top: 5%;
    	left:25%;
    	bottom:5%;
    	text-align: center;
        z-index: 2;
    }
   
    .container .mote_index .circle{
    	background: #000;
    	width:150px;
    	height:150px;
    	opacity:0;
    	top:35%;
    	position: absolute;
    	z-index: 700;
    	color:#fff;
    }
    .container .mote_index .circle span{
    	color:#fff;
    	font-weight: bold;
    	line-height:30px;
    	display: inline-block;
    	margin-top:40px;
    }
    .container .mote_index .circle span p{
    	font-size:24px;
    	line-height:30px;
    }
    .weui_btn_area{
    	position: absolute;
    	bottom:20px;
    	width: 90%;
    	left:2%;
        z-index: 200;
    	
    }
    .weui_btn_area a{
    	background:rgba(0,0,0,0.2);
    	width:30%;

    }
    .inside{
        z-index: 100;
    }
    .mote_man{
    	width:100%;
    } 
    .mote_man img{
    	width:150px;
    	border:1px solid #999;
    	border-radius: 3px;
    	background-color:rgba(0,0,0,0.4);
    }
    .mote_man .weui-li{
    	width:48%;
    	text-align: center;
    	display: inline-block;
    }
    .goback{
    	position: fixed;
    	top:5px;
    	left:10px;
        z-index: 10000;
    }
    .mote{
    	width:100%;
        position: relative;
    }
    .mote_box{
    	width:200px;
    	float:left;
        padding-top: 15px;
    }
    .dresse_box{
        width:40%;
        float:right;
        margin-right:10px;
        padding-top:30px;
    }
   

    .btn{
    	font-weight: normal;
    	font-size:14px;
    	background: rgba(0,0,0,0.1);
    	margin-top:20px;
    	border-radius: 5px;
    	text-align: center;
    	line-height: 36px;
    	vertical-align: middle;
    	cursor: pointer;

    }

    .dresse_box h4{
    	font-weight: normal;
    	font-size:14px;
    	background: rgba(0,0,0,0.1);
    	margin-bottom:20px;
    	border-radius: 5px;
    	text-align: center;
    	line-height: 36px;
    	vertical-align: middle;
    }
    .dresse_box h4 img{
    	vertical-align: middle;
    	line-height: 36px;
    }
    .marb5{
        margin-bottom:5px!important;
    }
    .marb20{
        margin-bottom:20px!important;
    }
    .dresse_box .box{
    	background: rgba(0,0,0,0.1);
    	height: 350px;
    	border-radius: 5px;
    	overflow-x: hidden; 
    	overflow-y: auto; 
    }
    .dresse_box .box1,.dresse_box .box2{
        background: rgba(0,0,0,0.1);
        height: 200px;
        border-radius: 5px;
        overflow-x: hidden; 
        overflow-y: auto; 
    }
    .dresse_box .box2{
        height: 150px;
    }
    .dresse_box .box img{
    	margin-left:10px;
    }
    h3{
    	font-weight:normal;
    	font-size:18px;
    	margin: 0 auto;
    	text-align: center;
    }
   
    .tops img{
    	width:100%;
    }
     .tops,.wtops {
    	position: absolute;
    	top: 100px;
    	left: 0px;
        width: 200px;
        height: 230px;
        z-index: 300;
    }
    .handbags {
        position: absolute;
        top: 250px;
        left: 100px;
        width: 120px;
        height: 142px;
        z-index: 400;
    }
     .fhandbags {
        position: absolute;
        top: 100px;
        left: 20px;
        width: 120px;
        height: 142px;
        z-index: 400;
    }
    .handbags_3{
        top: 93px;
        left: 110px;
    }
    .handbags_2{
        top: 240px;
    }
    .handbags_4{
        left: 0px;
    }
    .peishis {
        position: absolute;
        top: 15px;
        left: 46px;
        z-index: 400;
    }
    .fpeishis {
        position: absolute;
        top: 15px;
        left: 46px;
        z-index: 400;
    }

    .trousers{
    	position: absolute;
    	top: 235px;a
    	left: 0px;
        width: 200px;
        height: 230px;
        z-index: 200;
    }
    .wtrousers{
        position: absolute;
        top: 200px;
        left: 0px;
        width: 200px;
        height: 230px;
        z-index: 200;
    }
    .box img{
        z-index: 9999;
    }
    .box .trouser{
    	margin-top:5px;
    	padding-left:10px;
    }
    .bbtn{
        padding:3px 2px;
        border-radius: 10px;
        background-color: rgba(0,0,0,0.5);
        color:#fff;
        text-align: center;
        word-wrap: break-word; 
        font-size:10px;
        position:absolute;
        top:50px;
        left:10px;
        height: 50px;
        width: 15px;
        display: none;
        z-index: 20;
    }
    .view_dapei{
        width:100px;
        text-align: center;
        bottom:5px;
        position: fixed;
        left: 35%;
    }
    .view_dapei span{
        font-weight: normal;
        font-size:14px;
        background: rgba(245,110,11,0.6);
        border-radius: 5px;
        text-align: center;
        line-height: 36px;
        vertical-align: middle;
        cursor: pointer;
        display: inline-block;
        padding:0px 8px;
        color:#fff;
    }
    .preview{
        width:100%;
        text-align: center;
        position: absolute;
        top:0;
        display: none;
    }
    .weui_progress{
        width:90%;
        margin:0 auto;
        margin-top:50%;
        opacity:0.8
    }
    .weui_progress_inner_bar{
        height: 10px;
        background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }

  

  .bounceIn {
    -webkit-animation-duration: 2.75s;
    animation-duration: 2.75s;
  }
  .bounceInLeft,.bounceInRight{
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
  .fadeInLeft{
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }
  canvas{
    position: absolute;
    z-index: -1;
    width:100%;
    top:0;
    left:0;
    opacity:0.5;
  }

   @media only screen and (max-width:350px){
         .dresse_box{
            width:30%;
            padding-top: 10px;
         }
         .mote_box img{
            width:80%;
         }
         .wtops{
            top:85px;
         }
         .wtrousers{
            top: 165px;
         }
         .tops{
            top:85px;
         }
         .trousers{
            top: 195px;
         }
         .dresse_box .box{
            height:300px;
         }
         .handbags img{
            width:60%;
         }
         .fhandbags img{
            width:110%;
         }
         .fhandbags{
            top: 83px;
            left: 10px;
         }
         .handbags_3{
            top: 80px;
            left: 93px;
         }
         .handbags_1{
            top: 205px;
            left: 85px;
         }
         .handbags_4 {
             left:5px;
             top:205px;
         }
         .handbags_2 {
             left:85px;
             top: 200px;
         }
         .peishis{
            top: 10px;
            left: 40px;
         }
         .peishis img{
            width:75%;
         }
         .fpeishis {
             top: 13px;
             left: 35px;
         }
         .dresse_box .box1{
            height: 160px;
         }
         .dresse_box .box2{
            height: 130px;
         }
         
    }

    

    </style>
</head>
<body>
<div class="container" id="container">
    <div class="weui_progress">
            <div class="weui_progress_bar">
                <div style="text-align:center" class="progress_num f45 f-blue"></div>
                <div class="weui_progress_inner_bar js_progress" style="width:0%;"></div>
            </div>
        </div>
</div>

<!-- <audio data-config='' src="http://test.dliansoft.com/public/seller/music/YouMe.mp3" preload="meta"  id='audio'>
        您的浏览器不支持HTML5音频
    </audio> -->
<canvas id="myCanvas"  height="400" > </canvas>

<!-- <script src="__PUBLIC__/js/jquery-1.9.1.min.js"></script> -->
<script src="__PUBLIC__/seller/js/weui_zepto.min.js"></script>
<script src="__PUBLIC__/js/html2canvas.min.js"></script>
<!-- <script src="__PUBLIC__/js/vconsole.min.js"></script> -->
<script>

    function loadbg(){
        $('.weui_progress').remove();
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.fillStyle="#f86ca1";
        ctx.rotate(70*Math.PI/360);
        var w=10;
        var ak=setInterval(function(){
            ctx.fillRect(0,0,w,80);
            w=w+30;
            if(w>800){
                clearInterval(ak);
                setTimeout(page1,500);
            }
        },10)
    }
  /*  ctx.rotate(90*Math.PI/180);
    ctx.fillRect(600,80,800,80);*/

var imgurl='__PUBLIC__/seller/img/vote/mote_man/m1.png;__PUBLIC__/seller/img/vote/mote_man/m2.png;__PUBLIC__/seller/img/vote/mote_man/m3.png;__PUBLIC__/seller/img/vote/mote_woman/m1.png;__PUBLIC__/seller/img/vote/mote_woman/m2.png;__PUBLIC__/seller/img/vote/mote_woman/m3.png;__PUBLIC__/seller/img/vote/mote_woman/m4.png;__PUBLIC__/seller/img/vote/mote_index.png';
var imgs=imgurl.split(';');
var imageurl,p=0;
 preloadimages(imgs).done(function(images){
    imageurl=images;
 })

 //预加载图片
function preloadimages(arr){   
    var newimages=[], loadedimages=0
    var postaction=function(){}  //此处增加了一个postaction函数
    var arr=(typeof arr!="object")? [arr] : arr
    function imageloadpost(){
        loadedimages++
        p=loadedimages*100/arr.length;
        $('.js_progress').css('width',p+'%');
        $('.progress_num').text(p+'%');
        if(p>=100){
            loadbg();
        }
        if (loadedimages==arr.length){
            postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
        }
    }
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i]
       
        newimages[i].onload=function(){
            imageloadpost()
        }
        
        newimages[i].onerror=function(){
            imageloadpost()
        }
    }
    return { //此处返回一个空白对象的done方法
        done:function(f){
            postaction=f || postaction
        }
    }
}
function loadpic(){

    var img=new Image();//新建一个图片；
    img.src=imgs[i];
    if(img.complete){ 
        p=(i+1)*100/imgs.length;
        $('.js_progress').css('width',p+'%');
        $('.progress_num').text(p+'%');
        if(p==100) setTimeout(page1,500);
        if(i<imgs.length-1){
            i++;
            loadpic();
        }

    }else{
        img.onload = function () { //图片下载完毕时异步调用callback函数。
        p=(i+1)*100/imgs.length;
        $('.js_progress').css('width',p+'%');
        $('.progress_num').text(p+'%');
        if(p==100) setTimeout(page1,500);
        if(i<imgs.length-1){
            i++;
            loadpic();
        }
        };  
    }

}
    


 	

function page1(){
	var dtt=$('.container');
	dtt.html('<div class="mote_index"><img data="zoom" class="zoom bounceIn" src="__PUBLIC__/seller/img/vote/mote_index.png" width="100%"></div>');
    //loadimg();
		setTimeout(function(){
			$('.mote_index').append('<div class="circle"><span>遇见最美的你<p>秀搭配</p></span></div>');
			$('.mote_index .circle').fadeTo(500,0.4);
			$('.container').append('<div class="weui_btn_area weui_btn_area_inline"><a href="javascript:;" class="weui_btn" onclick="select_mote(1)">男生</a><a href="javascript:;" class="weui_btn" onclick="select_mote(2)">女生</a></div>')
           //$('.container').append('<audio><source src="http://test.dliansoft.com/public/seller/music/YouMe.mp3" type="audio/aac" /></audio>');

            audioAutoPlay('Jaudio');  
		},1200)

}
 $(function(){
    zymedia('video',{});
    zymedia('audio',{autoplay:true,preload:'metadata'});
    audioplay('audio');
    })
//播放音乐
 function audioplay(id){
    var audio = document.getElementById(id);
   !audio.paused?audio.pause():audio.play();

    
    document.addEventListener("WeixinJSBridgeReady", function () {
          !audio.paused?audio.pause():audio.play();
    }, false); 
}
function select_mote(num){
	if(num==1){
		var imgstr='<div class="goback"><a href="javascript:void(0)" onclick="page1()"><img src="__PUBLIC__/seller/img/vote/goback.png"></a></div><h3>请选择模特</h3><div style="text-align:center"><img src="__PUBLIC__/seller/img/vote/bottom_ar.png" style="width:30px;"></div><div class="mote_man">';
		for(var i=1;i<3;i++){
			imgstr+='<div class="weui-li"><img  data="zoom" class="fadeInLeft" src="__PUBLIC__/seller/img/vote/mote_man/m'+i+'.png" onclick="dressedPage(1,'+i+')"></div>';
		}
		imgstr+='</div>';
		$('.container').html(imgstr);
		//loadimg();//bug
		
	}
    if(num==2){
        var imgstr='<div class="goback"><a href="javascript:void(0)" onclick="page1()"><img src="__PUBLIC__/seller/img/vote/goback.png"></a></div><h3>请选择模特</h3><div style="text-align:center"><img src="__PUBLIC__/seller/img/vote/bottom_ar.png" style="width:30px;"></div><div class="mote_man">';
        for(var i=1;i<3;i++){
            imgstr+='<div class="weui-li"><img  data="zoom" class="fadeInLeft" src="__PUBLIC__/seller/img/vote/mote_woman/m'+i+'.png" onclick="dressedPage(2,'+i+')"></div>';
        }
            imgstr+='</div>';
        $('.container').html(imgstr);
    }
}

function loadimg(){
	var dt=$('.zoom');
	var imgH=dt.height();
	var imgW=dt.width();
	var marT=imgH/2;
	dt.css({'margin-top':marT+'px','width':'1px','height':'1px','opacity':0});
	dt.animate({
	    height:imgH,
	    width:imgW,
	    marginTop:0,
	    opacity :1
	},1200)
}
function dressedPage(type,num){
	var dtt=$('.container');
    if(type==1){
        var typename="mote_man";
        var typeno="100001";
    }
    if(type==2){
        var typename="mote_woman";
        var typeno="200001";
    }
	dtt.html('<div class="goback"><a href="javascript:void(0)" onclick="select_mote('+type+')"><img src="__PUBLIC__/seller/img/vote/goback.png"></a></div><div class="mote"><div class="mote_box"><img src="__PUBLIC__/seller/img/vote/'+typename+'/'+num+'.png" width="100%" class="bounceInLeft"></div><div class="dresse_box"><h4><img src="__PUBLIC__/seller/img/vote/sz_i.png">上衣</h4><div class="box" id="box"></div><div class="btn" onclick="next_step('+type+')">下一步</div></div></div>');
	$('.mote img').fadeIn();
	  var imgstr='';
	$.post('{:U("Ajax/getmatter")}',{type:typeno},function(rest){
		var marr=rest;
		for(var i=0;i<marr.length;i++){
            var barr=marr[i].fmatter_name.split('_');
				imgstr+='<img class="top" id="'+marr[i].fmatter_name+'" src="__PUBLIC__/seller/img/vote/'+barr[0]+'/m'+marr[i].fmatter_name+'.png" >';
			}
			$('.box').html(imgstr);
			 drag();
	})
}

function next_step(type){
    var clas=$('.mote_box').find('div').attr('class');
    if(clas==null){
        $.toast('请选择上衣','forbidden');
        return false;
    }
    var matchname=clas.split(' ');
    var matclas=matchname[0].replace('tops','trousers');
    $.showLoading();
	$.post('{:U("Ajax/getmatter")}',{match:matchname[1]},function(rest){

        $.hideLoading();
		var marr=rest;
		var imgstr='';
		for(var i=0;i<marr.length;i++){
				imgstr+='<img class="trouser" id="'+marr[i].fmatter_name+'" src="__PUBLIC__/seller/img/vote/'+matclas+'/m'+marr[i].fmatter_name+'.png" >';
			}
			$('.box').html(imgstr);
            $('.dresse_box h4').html('<img src="__PUBLIC__/seller/img/vote/kz_i.png">下装');
           
            $('.btn').remove();
            // $('.dresse_box').append('<div class="btn" onclick="select_mote('+type+')">重新搭配</div>');
            $('.dresse_box').append('<div class="btn" onclick="next_step2('+type+')">下一步</div>');
            if(marr[0].style){
                $('.container').append('<span class="bbtn">扎进去</span>');
                inside(type);
            }
			 drag();
           
	})
}
//加载头饰包包
function next_step2(type){
        var clas=$('.mote_box').find('div:last').attr('class');
            if(clas.indexOf('trousers')==-1){
                $.toast('请选择下装','forbidden');
                return false;
            }
            var imgstr='<h4 class="marb5"><img src="__PUBLIC__/seller/img/vote/sz_i.png">包包</h4 class="marb5"><div class="box1 marb20" id="box1">';
            if(type==1){
                var bagname='fhandbags';
                var psname='fpeishis';
                for(var i=0;i<1;i++){
                        imgstr+='<img class="handbag" id="'+bagname+'_'+(i+1)+'" src="__PUBLIC__/seller/img/vote/'+bagname+'/mhandbags_'+(i+1)+'.png" >';
                    }
                    imgstr+='</div><h4 class="marb5"><img src="__PUBLIC__/seller/img/vote/sz_i.png">配饰</h4 class="marb5"><div class="box2" id="box2">';
                for(var i=0;i<2;i++){
                        imgstr+='<img class="peishi" id="'+psname+'_'+(i+1)+'" src="__PUBLIC__/seller/img/vote/'+psname+'/mpeishis_'+(i+1)+'.png" >';
                    }
            }
               
            if(type==2) {
                var bagname='handbags';
                var psname='peishis';
                for(var i=0;i<4;i++){
                        imgstr+='<img class="handbag" id="'+bagname+'_'+(i+1)+'" src="__PUBLIC__/seller/img/vote/'+bagname+'/mhandbags_'+(i+1)+'.png" >';
                    }
                    imgstr+='</div><h4 class="marb5"><img src="__PUBLIC__/seller/img/vote/sz_i.png">配饰</h4 class="marb5"><div class="box2" id="box2">';
                for(var i=0;i<5;i++){
                        imgstr+='<img class="peishi" id="'+psname+'_'+(i+1)+'" src="__PUBLIC__/seller/img/vote/'+psname+'/mpeishis_'+(i+1)+'.png" >';
                    }
            } 
                
           
                imgstr+='</div><div class="btn" onclick="select_mote('+type+')">重新搭配</div>';
                $('.dresse_box').html(imgstr);
             drag();
}
//扎进去
function inside(type){
    $('.bbtn').click(function(){
        var btnclas=$(this).attr('class');
        if(type==1){
            var tdd=$('.mote_box .tops');
        }else{
            var tdd=$('.mote_box .wtops');
        }
        
        var tarr=tdd.attr('class').split(' ');
        var src=tdd.children('img').attr('src');
        var pathname=src.replace(/(.*\/)*([^.]+).*/ig,"$2");
        if(btnclas.indexOf('inside')==-1){
            var rsrc=src.replace(pathname,'i'+tarr[1]);
            tdd.children('img').attr('src',rsrc);
            $(this).addClass('inside');
            $(this).text('不扎吧');
            $('.wtrousers').css('z-index',300);
        }else{
            var rsrc=src.replace(pathname,tarr[1]);
            tdd.children('img').attr('src',rsrc);
            $(this).removeClass('inside');
            $(this).text('扎进去');
            $('.wtrousers').css('z-index',100);
        }
        

        
    })
   
}
function drag(){
 var img=$('.box img,.box1 img,.box2 img');
 var spageX,spageY,endX,endY
 img.on('touchstart',function(e){
      var touch = e.targetTouches[0]; 
      spageX=touch.pageX ; 
      spageY=touch.pageY; 
});
 img.on('touchmove',function(e){
     e.preventDefault();
     var touch = e.targetTouches[0]; 
     endX=touch.pageX-30; 
     endY=touch.pageY-30; 
     $(this).css('position','absolute');
     $(this).css({'top':endY+'px','left':endX+'px'})
     $('.info').text(endX+':'+endY)
 })
 img.on('touchend',function(e){
     if(endX>152&&(endY>18||endY<480)){

     }else{
        var arr=$(this).attr('id').split('_');
        $('.'+arr[0]).remove();
        $('.mote_box').append('<div class="'+arr[0]+' '+arr[0]+'_'+arr[1]+'"><img src="__PUBLIC__/seller/img/vote/'+arr[0]+'/'+arr[0]+'_'+arr[1]+'.png"/></div>');
        if(arr[0]=="trousers"||arr[0]=="wtrousers"){
           $('.bbtn').css('display','block');
           $('.container').append('<div class="view_dapei" onclick="view_dapei(\''+arr[0]+'\')"><span>OK完成搭配</span></div>');
        }
     }
     $(this).css('position','static');
     
 })
}
function view_dapei(str){

        if(str=="trousers"){
            var topstr=$('.mote_box .tops').attr('class').replace('tops ','');
            var troustr=$('.mote_box .trousers').attr('class').replace('trousers ','');
            var type=1;
        }else{
            var topstr=$('.mote_box .wtops').attr('class').replace('wtops ','');
            var troustr=$('.mote_box .wtrousers').attr('class').replace('wtrousers ','');
            var type=2;
        }
       
        var dpstr=topstr+','+troustr
         html2canvas($(".mote_box")).then(function(canvas) {  
             var imgdata = canvas.toDataURL();
             var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url  
             $('.container').html('<div class="preview"><img class="zoom" src="'+imgUri+'" data="'+imgdata+'"/></div><div class="weui_btn_area weui_btn_area_inline"><a href="javascript:;" class="weui_btn" onclick="appvote()">参与投票</a><a href="javascript:;" class="weui_btn" onclick="select_mote('+type+')">重新搭配</a></div><input type="hidden" id="dpstr" value="'+dpstr+'"/>')
             $('.preview').fadeIn();
         });  

}
//参与投票
function appvote(){
    var dpstr=$('#dpstr').val();
    var img=$('.preview img').attr('data');
    $.post('{:U("Ajax/save_dapei")}',{dpstr:dpstr,img:img,voteid:'{$voteid}'},function(res){
        if(res.statu=="success"){
            location.href="{:U('Interact/cdresse_baoming',array('moban'=>$moban,'voteid'=>$voteid))}"
        }
    })
}


</script>

</body>
</html>